<template>
	<s-layout navbar="custom">
		<!-- 卡片 -->
		<view class="header-box ss-row-center ss-col-center">
			<view class="card-box">
				<view class="ss-flex ss-row-between ss-col-center ss-m-t-10">
					<view>
						<view class="card-head ss-flex ss-col-center">
							<view class="card-title ss-m-r-10">我的答疑</view>
						</view>
						<view class="num"><b>{{state.question_num}}</b>提问 <span>|</span> <b>{{state.answer_num}}</b>回复</view>
					</view>
					<view>
						<button class="submit-btn ss-reset-button"
							@tap="addquestion">
							<uni-icons custom-prefix="iconfont" type="icon-tiwen" size="15"
								style="color:#FFFFFF;"></uni-icons> <span style="margin-left:5px;">我要提问</span>
						</button>
					</view>
				</view>
				<view class="tip-title">购买班型后即可享受课程+VIP双重服务</view>
				<view class="tip-desc">为保证会员服务质量，计划社VIP会员暂不对外出售，购买任意班型后即可获赠VIP会员，时效等同班型</view>
			</view>
		</view>

		<!-- <view class="ss-flex card-btn">
			<button class="ss-reset-button bottom-btn">
				<span style="margin-right:8px;">全部项目</span><uni-icons custom-prefix="iconfont"
					type="icon-xiajiantou-tianchong" size="14" style="color:#656565;"></uni-icons></button>
			<button class="ss-reset-button bottom-btn">
				<span style="margin-right:8px;">回复状态</span><uni-icons custom-prefix="iconfont"
					type="icon-xiajiantou-tianchong" size="14" style="color:#656565;"></uni-icons></button>
		</view> -->


		<uni-card class="bg-white content-box" v-for="(item, index) in state.list" :key="item">
			<view class="order-card-header ss-flex ss-col-center ss-row-between">
				<view class="order-no">{{ item.category_name }}</view>
				<view class="order-state ss-font-26">
					<button class="ss-reset-button reply-btn"
						:class="item.status=='已回复'?'do':'undo'">{{item.status}}</button>
				</view>
			</view>
			<view class="content-center" v-for="(question, index1) in item.list" :key="question">
				<view class="content" :class="{ 'suojin': index1>0 }">
					<view class="img" v-if="question.type == 1">
						<image class="question-img"
							:src="sheep.$url.static('/assets/addons/shopro/uniapp/tools/question.png')"></image>
					</view>
					<view class="img" v-if="question.type == 2">
						<image class="question-img"
							:src="sheep.$url.static('/assets/addons/shopro/uniapp/tools/answer.png')"></image>
					</view>
					<view class="text">
						<view v-if="question.type == 1">{{question.content}}</view>
						<view v-if="question.type == 2">
							<view class="user ss-flex ss-m-b-14">
								<view class="ss-m-r-10 ss-flex">
									<image class="avatar" :src="sheep.$url.cdn(question.user.avatar)"></image>
								</view>
								<view class="nickname ss-m-r-10">
									{{ question.user.username }}
								</view>
								<view><uni-icons custom-prefix="iconfont" type="icon-arrow_right_fat" size="12"
										style="color:#858585;opacity:0.5;"></uni-icons></view>
								<view class="nickname" style="margin-left:6px;">我</view>
							</view>
							<view>{{question.content}}</view>
						</view>
						<view class="ss-flex images_content" v-if="question.images">
							<su-image mode="widthFit" isPreview v-for="(img, index2) in question.images" :src="getImageUrl(img)">
							</su-image>
						</view>
						<view class="time">{{question.createtime}}</view>
					</view>
				</view>
			</view>
			<view class="content-question-btn">
				<button class="ss-reset-button question-btn" @tap="sheep.$router.go('/pages/index/user?path=zhuiwen', { group: item.group })">追问</button>
			</view>
		</uni-card>
	</s-layout>
</template>

<script setup>
	import {
    onLoad
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		ref,
		unref
	} from 'vue';
	import sheep from '@/sheep';

	const state = reactive({
		list: []
	});



	function getImageUrl(imageName) {
		// 假设你的基础 URL 是这个
		const baseUrl = 'https://wkadmin.jhpress.com/';
		// 返回完整的 URL
		return baseUrl + imageName;
	}
	
	function addquestion(){
		sheep.$api.course.isvip({
			
		}).then((res) => {
			if (res.data === true) {
				sheep.$router.go('/pages/index/user?path=addquestion');
			} else {
				uni.showModal({
					title: '提示',
					content: '您还不是微会员，请先购买课程',
					showCancel:false,
					success: function(res) {
						if (res.confirm) {
							sheep.$router.go('/pages/goods/list');
						}
					}
				})
			}
		});
	}
  async function getquestion(){
    let res = await sheep.$api.app.getquestion({
    });
    /*console.log("res");
    console.error(res);*/
    if (res.code == 1) {
      console.log(res)
      state.question_num = res.data.question_num
      state.answer_num = res.data.answer_num
      state.list = res.data.grouplist
    }
  }
  onLoad(async (options) => {
    getquestion();
  })
  //getquestion();
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.header-box {
		background: linear-gradient(to top, #fafaf8, #f8e5ce);

		.card-box {
			width: 100%;
			min-height: 300rpx;
			padding: 40rpx;
			background-size: 100% 100%;
			overflow: hidden;
			position: relative;
			z-index: 1;
			box-sizing: border-box;

			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				z-index: 2;
				position: absolute;
				top: 0;
				left: 0;
				background: v-bind(headerBg) no-repeat;
				pointer-events: none;
			}

			.card-head {
				color: #333333;
				font-size: 40rpx;
			}

			.ss-eye-icon {
				font-size: 40rpx;
				color: $white;
			}

			.num {
				font-size: 30rpx;
				line-height: 3;
				font-family: OPPOSANS;
				color: #674b29;
			}

			.num b {
				color: #ff5967;
				margin-right: 10px;
				font-size: 20px;
			}

			.num span {
				margin: 0px 10px;
				color: #674b29;
				opacity: 0.2;
			}

			.reduce-num {
				font-size: 26rpx;
				font-weight: 400;
				color: $white;
			}

			.ss-reset-button {
				font-size: 16px;
			}


		}
	}

	.content-box {
		margin-top: -10px !important;
		padding: 5px 12px;
		box-sizing: border-box;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 10px !important;

		.content {
			display: flex;
			flex-direction: row;
			margin-top: 6px;
		}

		.reply-btn {
			width: 64px;
			height: 42rpx;
			border-radius: 18rpx;
			line-height: 42rpx;
			font-size: 24rpx;

		}

		.img {
			width: 30px;
			margin-top: 4px;
		}

		.undo {
			background-color: #ffdee1;
			color: #ff5967;
		}

		.do {
			background-color: #e1e6fb;
			color: #6780ed;
		}

		.question-img {
			width: 16px;
			height: 16px;
		}

		.text {
			width: 90%;
			font-size: 16px;
			color: #4b4e5d;
			line-height: 44rpx;
		}

		.images_content {
			margin-top: 5px;
		}

		.images_content image {
			width: 100%;

		}

		.time {
			font-size: 14px;
			color: #888888;
			opacity: 0.8;
		}

		.avatar {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
		}

		.nickname {
			font-size: 32rpx;
			color: #999999;
		}
	}

	.order-card-header {
		min-height: 80rpx;
		border-bottom: 1px solid #e1e1e1;

		.order-no {
			font-size: 30rpx;
			color: #9fa3a2;
		}

		.order-state {}
	}

	.content-center {
		padding-bottom: 5px;
	}

	.content-text {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.content-btn {
		padding-top: 15px;
		padding-bottom: 15px;
		text-align: right;
	}

	.submit {
		margin-top: 40px;
		display: flex;
		justify-content: center;
	}

	.submit-btn {
		width: 140px;
		height: 84rpx;
		border-radius: 5px;
		background-color: var(--ui-BG-Main) !important;
		color: var(--ui-BG-Main-TC) !important;
		box-shadow: var(--ui-Main-box-shadow) !important;
	}

	.card-btn {
		justify-content: space-around;
		margin-top: -24px
	}

	.bottom-btn {
		width: 340rpx;
		height: 76rpx;
		border-radius: 20rpx;
		line-height: 76rpx;
		font-size: 26rpx;
		background-color: $white;
		color: #5c6162;
	}

	.suojin {
		width: 95%;
		margin-left: 5%;
	}

	.content-question-btn {
		height: 32px;
		margin-top: 20px;
		border-top: 1px solid #dddddd;
		padding-top: 10px;
		text-align: right;
	}

	.question-btn {
		width: 74px;
		height: 54rpx;
		border-radius: 20rpx;
		background-color: #ff5967;
		color: #FFFFFF;
		font-size: 14px;
		float: right;
	}
	
	.tip-title{
		font-size: 13px;
		margin-top: 20px;
		margin-bottom: 10px;
		font-weight: 500;
		color: #333333;
	}
	.tip-desc{
		font-size: 12px;
		color: #888888;
	}
</style>